<template>
  <view class="content">
	<view class="tabs-container">
		<view class="tabs-nav">
			<view class="tab-item" :class="{ 'active': currentIndex === 0 }" @click="switchTab(0)">
				<icon class="iconfont icon-ziyuannengli" style="font-size:24px;"></icon>
				<view>待提货</view>
			</view>
			<view class="tab-item" :class="{ 'active': currentIndex === 1 }" @click="switchTab(1)">
				<icon class="iconfont icon-che" style="font-size:24px;"></icon>
				<view>在途</view>
			</view>
			<view class="tab-item" :class="{ 'active': currentIndex === 2 }" @click="switchTab(2)">
				<icon class="iconfont icon-yiwancheng" style="font-size:24px;"></icon>
				<view>已完成</view>
			</view>
		</view>
		<swiper :current="currentIndex" class="tabs-content" duration="300" @change="onSwiperChange">
			<swiper-item>
				<view class="tab-content">
					<block v-if="daitihuo.length > 0">
					<!-- <button @click="dzfx">分析</button> -->
						<view v-for="(item,index) in daitihuo" :key="item.id" style="padding-bottom: 50rpx;">
							<view>
								<text class="bt">任务编号：{{item.id}}</text>
							</view>
							<view>
								<icon class="iconfont icon-dingwei" style="font-size:24px;"></icon>
								起：<text v-text="item.startAddress"></text>
							</view>
							<view>
								<icon class="iconfont icon-zhunxing" style="font-size:24px;"></icon>
								止：<text v-text="item.endAddress"></text>
							</view>
							<view style="display: flex; align-items: center;background-color: darkgrey;">
								<text style="background-color: coral;" v-if="isOverdue(item)">超时</text>
								<text>提货时间{{ item.thsj }}</text>
								<button :disabled="index>0" class="than" @click="than(index)">提货</button>
							</view>
						</view>
					</block>
					<view class="juzhongcontent" v-else>
						无待提货物！
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="tab-content">
					<block v-if="zaitu.length > 0">
						<view v-for="(item,index) in zaitu" :key="item.id" style="padding-bottom: 50rpx;">
							<view>
								<text class="bt">任务编号：{{item.id}}</text>
							</view>
							<view>
								<icon class="iconfont icon-dingwei" style="font-size:24px;"></icon>
								起：<text v-text="item.startAddress"></text>
							</view>
							<view>
								<icon class="iconfont icon-zhunxing" style="font-size:24px;"></icon>
								止：<text v-text="item.endAddress"></text>
							</view>
							<view style="display: flex; align-items: center;background-color: darkgrey;">
								<text style="background-color: coral;" v-if="isOverdue(item)">超时</text>
								<text>提货时间{{ item.thsj }}</text>
								<button :disabled="index>0" class="than" @click="jfan(index)">交付</button>
							</view>
							<view class="fixed-button-row">
								<button type="primary" style="width: 100%;" @click="huiche">回车登记</button>
							</view>
						</view>
					</block>
					<view class="juzhongcontent" v-else>
						无在途任务！
					</view>
				</view>
			</swiper-item>
			<swiper-item>
				<view class="tab-content">
					<block v-if="yiwancheng.length > 0">
					</block>
					<view class="juzhongcontent" v-else>
						暂无历史记录！
					</view>
				</view>
			</swiper-item>
		  </swiper>
	  </view>
  </view>
</template>

<script>
	export default {
		data() {
			return {
				currentIndex: 0,
				daitihuo:[
					{
						id:'ABCD1234',
						lxr:'XC',
						cph:'京A·00000',
						phone:'13272488941',
						ds:'10',
						hr:[
							{
								ydh:'AB100',
								ds:'1',
								zl:'5'
							},
							{
								ydh:'AB101',
								ds:'2',
								zl:'10'
							},
							{
								ydh:'AB102',
								ds:'3',
								zl:'15'
							},
							{
								ydh:'AB103',
								ds:'4',
								zl:'20'
							},
							{
								ydh:'AB104',
								ds:'5',
								zl:'25'
							},
						],
						//寝室
						/* jda:'112.888',
						wda:'28.114523', */
						//北京的故宫
						jda:'116.397026',
						wda:'39.918058',
						//上海中心大厦
						jdb:'121.505406',
						wdb:'31.233501',
						thsj:'2024-08-02 7:00:00',
						sdsj:'2024-08-04 7:00:00',
						startAddress: '',
						endAddress: ''
					},
					{
						id:'ZYXW9876',
						lxr:'DL',
						cph:'沪A·00000',
						phone:'19918730300',
						ds:'5',
						hr:[
							{
								ydh:'AB100',
								ds:'1',
								zl:'5'
							},
							{
								ydh:'AB101',
								ds:'2',
								zl:'10'
							},
							{
								ydh:'AB102',
								ds:'3',
								zl:'15'
							},
							{
								ydh:'AB103',
								ds:'4',
								zl:'20'
							},
							{
								ydh:'AB104',
								ds:'5',
								zl:'25'
							},
						],
						//广州塔
						jda:'113.32446',
						wda:'23.10647',
						//喜马拉雅山
						jdb:'86.925278',
						wdb:'27.988056',
						thsj:'2024-09-03 7:00:00',
						sdsj:'2024-09-05 7:00:00',
						startAddress: '',
						endAddress: ''
					}
				],
				zaitu:[
					{
						id:'ABCD1234',
						lxr:'XC',
						cph:'京A·00000',
						phone:'13272488941',
						ds:'10',
						sj:[
							{
								id:'SJ1',
								name:'XCA',
							},
							{
								id:'SJ2',
								name:'XCB',
							},
						],
						hr:[
							{
								ydh:'AB100',
								ds:'1',
								zl:'5'
							},
							{
								ydh:'AB101',
								ds:'2',
								zl:'10'
							},
							{
								ydh:'AB102',
								ds:'3',
								zl:'15'
							},
							{
								ydh:'AB103',
								ds:'4',
								zl:'20'
							},
							{
								ydh:'AB104',
								ds:'5',
								zl:'25'
							},
						],
						//寝室
						//北京的故宫
						jda:'116.397026',
						wda:'39.918058',
						//上海中心大厦
						jdb:'121.505406',
						wdb:'31.233501',
						thsj:'2024-08-02 7:00:00',
						sdsj:'2024-08-04 7:00:00',
						startAddress: '',
						endAddress: ''
					}
				],
				yiwancheng:[],
				key:'QXYBZ-ELWL4-24GUV-K6GFK-I2LVF-EDBTJ',
				
			}
		},
		methods: {
			switchTab(index) {
			    this.currentIndex = index;
			},
			onSwiperChange(e) {
			    this.currentIndex = e.detail.current;
			},
			dzfx(){
				console.log("开始")
				console.log(this.getDetailedAddress(this.daitihuo[0].jda, this.daitihuo[0].wda))
			},
			getDetailedAddress(longitude,latitude){//longitude是经度，latitude是纬度
				return false//由于访问次数有限，需要的时候解开
				return new Promise((resolve, reject) => {
					wx.request({
						url: 'https://apis.map.qq.com/ws/geocoder/v1/',
						data: {
							location: `${latitude},${longitude}`,
							key: `${this.key}`,
							get_poi: 1
						},
						method: 'GET',
						success: (res) => {
							if (res.statusCode === 200 && res.data.status === 0) {
								resolve(res.data.result.address + (res.data.result.pois[0] ? res.data.result.pois[0].title : ''));
								/* return console.log(res) */
							} else {
								console.error('获取地址信息失败:', res.data.message);
							}
						},
						fail: (err) => {
							console.error('请求失败:', err);
						}
					});
				})
			},
			async updateAddresses() {
				for (const item of this.daitihuo) {
					await this.getAddress(item.jda, item.wda, 'startAddress','a');
					await this.getAddress(item.jdb, item.wdb, 'endAddress','a');
					await new Promise(resolve => setTimeout(resolve, 500));
				}
				for (const item of this.zaitu) {
					await this.getAddress(item.jda, item.wda, 'startAddress','b');
					await this.getAddress(item.jdb, item.wdb, 'endAddress','b');
					await new Promise(resolve => setTimeout(resolve, 500));
				}
			},
			async getAddress(longitude, latitude, property,pd) {//待提货
				try {
					const address = await this.getDetailedAddress(longitude, latitude);
					if(pd==='a'){
						this.$set(this.daitihuo.find(item => item.jda === longitude), property, address);
					}else if(pd==='b'){
						this.$set(this.zaitu.find(item => item.jda === longitude), property, address);
					}else{
						console.log("已完成")
					}
				} catch (error) {
					const address = await this.getDetailedAddress(longitude, latitude);
					if(pd==='a'){
						this.$set(this.daitihuo.find(item => item.jdb === longitude), property, address);
					}else if(pd==='b'){
						this.$set(this.zaitu.find(item => item.jdb === longitude), property, address);
					}else{
						console.log("已完成")
					}
				}
			},
			isOverdue(item) {
				const now = new Date();
				const pickupTime = new Date(item.thsj);
				return pickupTime < now;
			},
			than(index){
				wx.navigateTo({
					url:'/pages/index/Daitihuo/Tihuoye?value='+encodeURIComponent(JSON.stringify(this.daitihuo[index]))
				})
			},
			jfan(index){
				wx.navigateTo({
					url:'/pages/index/Zaituml/Zaitu?value='+encodeURIComponent(JSON.stringify(this.zaitu[0]))
				})
			},
			huiche(){
				wx.navigateTo({
					url:'/pages/index/Daitihuo/Tihuoye?value='+encodeURIComponent(JSON.stringify(this.zaitu[0]))
				})
			}
		},
		onLoad() {
		    this.updateAddresses();
		},
	}
</script>

<style scoped>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.tabs-container {
  width: 100%;
}
.tabs-nav {
  display: flex;
  justify-content: space-around;
  padding: 10px 0;
  background-color: #f5f5f5;
  position: fixed; /* 添加 position: fixed */
  top: 0; /* 设置距离顶部的位置 */
  left: 0; /* 设置距离左边的位置 */
  right: 0; /* 设置距离右边的位置 */
  z-index: 1000; /* 设置较高的 z-index 确保覆盖其他元素 */
}
.active {
  color: #409eff;
  border-bottom: 2px solid #409eff;
}
.tabs-content {
  height: 1175rpx; /* 或者其他你想要的高度 */
  background-color: #fff;
  padding-top: 17%;
  /* border: 1px red solid; */
}
.tab-icon {
  width: 30rpx; /* 图片宽度 */
  height: 30rpx; /* 图片高度 */
  margin-right: 10rpx; /* 图片与文字之间的间距 */
}
.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tab-item .iconfont {
  margin-bottom: 5px; /* 可以根据需要调整间距 */
}
.tab-content{
	height: 100%;
}
.juzhongcontent {
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100%; /* 设置高度为100%，确保垂直居中 */
}

.no-data {
    font-size: 16px;
    color: #999;
}
.bt{
	background-color: #409eff;
	display: inline-block;
	padding: 10rpx 20rpx;
	border-radius: 20rpx;
	font-size: 32rpx;
}
.than{
	width: 20%;
	margin-right: 0rpx;
}
.fixed-button-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80rpx;
  background-color: #fff;
  z-index: 1000; /* 确保按钮层叠在其他内容之上 */
}

/* 按钮样式 */
.fixed-button-row button {
  width: 50%;
  height: 100%;
  line-height: 80rpx;
  text-align: center;
  border: none;
  color: #333;
  font-size: 30rpx;
}
</style>
